<template>
  <div class="listRetrievalMain">
    <div class="retrievalHead">
      <div class="retrievalInputMain">
        <img src="https://zyl-bolg-1256871043.cos.ap-guangzhou.myqcloud.com/back1%2FnavLogo.png">
        <el-input v-model="value" placeholder="请输入内容后按回车查询..." suffix-icon="el-icon-search" @change="retrievalChange"/>
      </div>
    </div>
    <div class="listRetrievalListMain">
      <div class="ListimgMain" v-if="retrievalListType">
        <img src="../../assets/img/bk_wsj.png">
      </div>
      <el-empty description="没有查询到相关信息，请重新检索..." v-if="retrievalList.length === 0 && retrievalListType === false"></el-empty>
      <template v-for="(item, index) in retrievalList">
        <div class="listMain" @click="jump(item)">
          <div class="listMainTitle zylSpace zylTransition">{{ item.title }}</div>
          <div class="listMainTime">{{ item.creationtime }}</div>
        </div>
      </template>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import '@/assets/scss/index.scss';
import Footer from '@/components/Footer';
import Interface from './serve/api';
export default {
  // 检索
  name: 'retrievalIndex',
  components: {
    Footer
  },
  data () {
    return {
      value: '',
      retrievalList: [],
      retrievalListType: true,
    }
  },
  methods: {
    // 检索
    retrievalChange () {
      if (this.value.length != 0) {
        let params = {
          title: this.value,
          state: '是',
        };
        Interface.getNotearticleTitle(params).then(res => {
          if (res.status === 200) {
            this.retrievalListType = false;
            this.retrievalList = res.data;
          };
        })
      };
    },

    // 跳转
    jump (item) {
      let routeUrl = this.$router.resolve({
        path: '/content/Index',
        query: {
          id: item.id,
        }
      });
      window.open(routeUrl.href, '_blank');
    },
  }
}
</script>
